<template>
  <!-- 加载 -->
  <div v-if="loading" class="loading">
    <Spin :spinning="loading" />
  </div>
  <div v-else class="design">
    <div class="create-page-header">
      <div class="w-50">表单</div>
      <div>
        <Tabs v-model:activeKey="activeKey" centered>
          <TabPane v-for="item of tabs" :key="item.key" :tab="item.name" />
        </Tabs>
      </div>
      <div class="w-50">
        <Button class="mr-1" @click="handlePreview">预览</Button>
        <Button type="primary">发布</Button>
      </div>
    </div>
    <!-- 表单设计 -->
    <CustomForm v-if="activeKey === '2'" />
    <!-- 流程设计 -->
    <WorkFlow v-if="activeKey === '3'" />
    <!-- 表单预览 -->
    <PreviewForm ref="PreviewFormRef" />
  </div>
</template>

<script lang="tsx" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { Tabs, TabPane, Button, Spin } from 'ant-design-vue';
  import WorkFlow from './src/WorkFlow/index.vue';
  import CustomForm from './src/CustomForm/index.vue';
  import PreviewForm from './src/PreviewForm/index.vue';
  const activeKey = ref('2');
  const loading = ref(true);
  const PreviewFormRef = ref();
  const tabs = reactive([
    {
      key: '1',
      name: '① 基础设置',
    },
    {
      key: '2',
      name: '② 表单设计',
    },
    {
      key: '3',
      name: '③ 流程设计',
    },
    {
      key: '4',
      name: '④ 高级设置',
    },
  ]);
  onMounted(() => {
    loading.value = false;
  });
  /**
   * 预览表单
   */
  const handlePreview = () => {
    PreviewFormRef.value.show();
  };
</script>

<style lang="less" scoped>
  .design {
    height: 100vh;
    overflow: hidden;

    .create-page-header {
      z-index: 11;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 54px;
      padding: 0 20px 0 20px;
      background: #fff;
      box-shadow: 0 1px 4px 0 rgb(17 31 44 / 4%);
    }
  }

  .loading {
    text-align: center;
    padding: 30px 50px;
    margin: 20px 0;
  }

  .box-shadow {
    box-shadow: 0 1px 4px 0 rgb(17 31 44 / 4%);
  }

  :deep(.ant-tabs-nav) {
    margin: 0 !important;
  }
</style>
